<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: #ebeff7;
        }

        table {
            margin: 0 auto;
            width: 640px;
            border-collapse: collapse;
        }

        td, th {
            padding: 0;
        }

        td, th {
            text-align: center;
            border: 1px solid #99b0da;
        }

        td {
            background: #ffffff;
            font: 12px/28px "微软雅黑";
        }

        th {
            font: 14px/30px "微软雅黑";
            background: #dbe3fa;
        }

        .bg {
            background: #f4fcf7;
        }

        /*图片垂直居中*/
        img {
            /*对行内元素有效，对inline-block无效*/
            vertical-align: middle;
        }

        .high {
            color: #e54600;
        }

        .low {
            color: #000065;
        }

        .space {
            height: 4px;
            border: none;
            background: #ebeff7;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th colspan="2">日期</th>
        <th colspan="2">天气现象</th>
        <th>气温</th>
        <th>风向</th>
        <th>风力</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2" class="bg">22日星期五</td>
        <td class="bg">白天</td>
        <td><img src="img/img_01.gif" alt=""></td>
        <td>晴间多云</td>
        <td class="high">高温7℃</td>
        <td>无持续风向</td>
        <td>微风</td>
    </tr>
    <tr>
        <td class="bg">夜间</td>
        <td><img src="img/img_02.gif" alt=""></td>
        <td>晴</td>
        <td class="low">低温-4℃</td>
        <td>无持续风向</td>
        <td>微风</td>
    </tr>
    <tr>
        <td colspan="7" class="space"></td>
    </tr>
    <tr>
        <td rowspan="2" class="bg">22日星期五</td>
        <td class="bg">白天</td>
        <td><img src="img/img_01.gif" alt=""></td>
        <td>晴间多云</td>
        <td class="high">高温7℃</td>
        <td>无持续风向</td>
        <td>微风</td>
    </tr>
    <tr>
        <td class="bg">夜间</td>
        <td><img src="img/img_02.gif" alt=""></td>
        <td>晴</td>
        <td class="low">低温-4℃</td>
        <td>无持续风向</td>
        <td>微风</td>
    </tr>
    </tbody>
</table>
</body>
</html>